<!--周建威-->
<!--2017/12/26-->
<template>
    <div>
        <!--工具条 start -->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true"  :data="filters" @submit.native.prevent>
                <el-form-item>
                    <el-select v-model="filters.type" placeholder="素材类型">
                        <el-option
                                v-for="(type,key) in typeList"
                                :key="key"
                                :label="type"
                                :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="float: right">
                    <el-button type="primary" v-on:click="visible.uploadForm=true" icon="el-icon-circle-plus-outline">新增
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--工具条 end  -->
        <el-table :data="list" style="width: 100%">
            <el-table-column type="index" >
            </el-table-column>
            <el-table-column prop="name" label="名称" >
            </el-table-column>
            <el-table-column prop="media_id" label="素材id" >
            </el-table-column>
            <el-table-column prop="url" label="url">
                <span slot-scope="scope">
                    <a :href="scope.row.url">{{scope.row.url}}</a>
                </span>
            </el-table-column>
            <el-table-column prop="update_time" >
            </el-table-column>
        </el-table>
        <el-dialog  :visible.sync="visible.uploadForm" width="500px">
            <div slot="title" class="dialog-title">
                上传素材
            </div>
            <el-form labelWidth="80px">
                <el-form-item label="文件类型">
                    <el-select v-model="type" placeholder="请选择">
                        <el-option
                                v-for="(type,key) in typeList"
                                :key="key"
                                :label="type"
                                :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文件上传">
                    <el-upload :action="action" :headers="fileHeader"  :before-upload="beforeUpload" :data="{type:type}" :on-success="handleSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip" v-if="type=='image'">只能上传bmp/png/jpeg/jpg/gif图片，且大小不超过2M</div>
                        <div slot="tip" class="el-upload__tip" v-if="type=='video'">只支持MP4格式，且大小不超过10M</div>
                        <div slot="tip" class="el-upload__tip" v-if="type=='radio'">支持mp3/wma/wav/amr格式，且大小不超过2M，播放长度小于60秒</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible.uploadForm  = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
  import {uploadMedia, getWeChatMedia} from '../../api/api'

  export default {
    data () {
      return {
        visible: {
          uploadForm: false
        },
        fileHeader: {
          Authorization: `Bearer ${this.$store.state.token}`,
          Accept: 'application/json'
        },
        filters: {
          pageSize: 10,
          type: '',
          page: 1
        },
        type: 'image',
        typeList: {
          image: '图片',
          video: '视频',
          radio: '语音'
        },
        action: uploadMedia,
        list: []
      }
    },
    computed: {

    },
    methods: {
      // 验证
      beforeUpload (file) {
        let fileType = file.type;
        switch (this.type) {
        case 'image':
          if (fileType !== 'image/png' &&
              fileType !== 'image/bmp' &&
              fileType !== 'image/jpeg' &&
              fileType !== 'image/gif' &&
              fileType !== 'image/jpg') {
            this.$alert('图片格式只支持bmp/png/jpeg/jpg/gif', '错误', {type: 'error'})
            return false
          }
          if (file.size / 1024 / 1024 > 2) {
            this.$alert('图片大小必须小于2M', '错误', {type: 'error'})
            return false
          }
          break
        case 'video':
          if (fileType !== 'video/mp4') {
            this.$alert('视频只支持MP4格式', '错误', {type: 'error'})
            return false
          }
          if (file.size / 1024 / 1024 > 10) {
            this.$alert('视频大小必须小于10M', '错误', {type: 'error'})
            return false
          }
          break
        case 'radio':
          if (fileType !== 'audio/mpeg' &&
            fileType !== 'audio/x-wav' &&
            fileType !== 'audio/amr' &&
            fileType !== 'audio/x-ms-wma') {
            this.$alert('语音只支持mp3/wma/wav/amr格式', '错误', {type: 'error'})
            return false
          }
          if (file.size / 1024 / 1024 > 2) {
            this.$alert('语音大小必须小于2M', '错误', {type: 'error'})
            return false
          }
          break
        }
      },
      // 上传成功
      handleSuccess (response, file, fileList) {
        if (parseInt(response.status) === 1) {
          this.$message({
            message: '上传成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '上传失败',
            type: 'success'
          });
        }
      },
      // 列表
      handleList () {
        getWeChatMedia(this.filters).then(res => {
          if (parseInt(res.status) === 1) {
            this.list = res.data;
          }
        })
      }
    },
    mounted () {
      this.handleList();
    }
  }
</script>
<style scoped rel="stylesheet/sass" lang="sass">
    .el-upload__tip
        color: red
</style>